<template>
    <div class="header" :style="{'background':homeColor}">
        <!-- 折叠按钮 -->
        <div class="collapse-btn" @click="collapseChage">
            <i v-if="!collapse" class="el-icon-s-fold"></i>
            <i v-else class="el-icon-s-unfold"></i>
        </div>
        <div class="logo">后台管理系统</div>
        <div class="header-right">
            <div class="header-user-con">
                <!-- 自定义主题颜色 -->
                <div>
                    <el-tooltip effect="dark" content="自定义主题颜色" placement="bottom">
                        <v-picker v-model="colorPage3"></v-picker>
                    </el-tooltip>
                </div>
                <!--网站设置-->
                <div @click="drawer = true">
                    <el-tooltip effect="dark" content="系统设置" placement="bottom">
                        <i class="el-icon-setting"></i>
                    </el-tooltip>
                </div>
                <!-- 全屏显示 -->
                <div class="btn-fullscreen" @click="handleFullScreen">
                    <el-tooltip effect="dark" :content="fullscreen ? `取消全屏` : `全屏`" placement="bottom">
                        <i class="el-icon-rank"></i>
                    </el-tooltip>
                </div>
                <!-- 消息中心 -->
                <div class="btn-bell">
                    <el-tooltip effect="dark" :content="message ? `有${message}条未读消息` : `消息中心`" placement="bottom">
                        <router-link to="/tabs">
                            <i class="el-icon-bell"></i>
                        </router-link>
                    </el-tooltip>
                    <span class="btn-bell-badge" v-if="message"></span>
                </div>
                <!-- 用户头像 -->
                <div :class="headPhotoInfo*1 <= 5?'user-avator':'user-avator-else'"
                     @click="drawer = true">
                    <svg class="icon" aria-hidden="true">
                        <use :xlink:href="`#el-icon-lx-headPhoto${headPhotoInfo}`"></use>
                    </svg>
                </div>
                <!--<div class="user-avator-else" v-if="headPhoto*1 !== 1&&2&&3&&4&&5">-->
                <!--<svg class="icon" aria-hidden="true">-->
                <!--<use :xlink:href="`#el-icon-lx-headPhoto${headPhoto}`"></use>-->
                <!--</svg>-->
                <!--</div>-->
                <!-- 用户名下拉菜单 -->
                <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                        {{ username }}
                        <i class="el-icon-caret-bottom"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <el-drawer
                title="我是标题"
                :visible.sync="drawer"
                :with-header="false"
                :before-close="handleClose">
            <div class="content_box">
                <div style="min-height: 80px">
                    <el-divider content-position="left">导航版型</el-divider>
                    <div style="margin-top: 20px">
                        <el-radio-group v-model="radios" size="small" @change="changeRadioFun()">
                            <el-radio label="1" border>竖版</el-radio>
                            <el-radio label="2" border>横板</el-radio>
                        </el-radio-group>
                    </div>
                </div>
                <div style="min-height: 80px">
                    <el-divider content-position="left">头像列表</el-divider>
                    <div style="margin-top: 20px">
                        <div class="photo_box">
                            <div class="headPhoto" v-for="(item,index) of 15" @click="GetHeadPhoto(index+1)">
                                <el-tooltip placement="top">
                                    <div slot="content">
                                        <svg class="icon" aria-hidden="true">
                                            <use :xlink:href="`#el-icon-lx-headPhoto${index + 1}`"></use>
                                        </svg>
                                    </div>
                                    <svg class="icon" aria-hidden="true">
                                        <use :xlink:href="`#el-icon-lx-headPhoto${index + 1}`"></use>
                                    </svg>
                                </el-tooltip>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="min-height: 250px;">
                    <el-divider content-position="left">导航颜色</el-divider>
                    <div class="colorList_box">
                        <div class="colorDefault" @click="serColor('#324157',2)">
                            <span class="colorName">默认</span>
                            <span class="colorList" :style="{'background':'#324157'}"></span>
                        </div>
                        <div class="colorDefault" v-for="item in colorList" :key="item.color"
                             @click="serColor(item.color,2)">
                            <span class="colorName">{{item.name}}</span>
                            <span class="colorList" :style="{'background':item.color}"></span>
                        </div>
                        <div class="colorDefault">
                            <span class="colorName">自定义</span>
                            <el-color-picker v-model="colorPage2" size="mini" class="colorList"
                                             @change="serColor()"></el-color-picker>
                        </div>
                    </div>
                </div>
                <div style="min-height: 250px;">
                    <el-divider content-position="left">标题颜色</el-divider>
                    <div class="colorList_box">
                        <div class="colorDefault" @click="serColor('#242f42',1)">
                            <span class="colorName">默认</span>
                            <span class="colorList" :style="{'background':'#242f42'}"></span>
                        </div>
                        <div class="colorDefault" v-for="item in colorList" :key="item.color"
                             @click="serColor(item.color,1)">
                            <span class="colorName">{{item.name}}</span>
                            <span class="colorList" :style="{'background':item.color}"></span>
                        </div>
                        <div class="colorDefault">
                            <span class="colorName">自定义</span>
                            <el-color-picker v-model="colorPage1" size="mini" class="colorList"
                                             @change="serColor()"></el-color-picker>
                        </div>
                    </div>
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<script>
    import vPicker from './ThemePickerColor.vue';
    import bus from './bus';
    import loadEvents from '../utils/loading';
    import { mapGetters, mapMutations } from 'vuex';

    export default {
        data() {
            return {
                //头像
                headPhoto: '1',
                collapse: false,
                fullscreen: false,
                name: 'linxin',
                message: 2,
                drawer: false,
                colorPage1: '',
                colorPage2: '',
                colorPage3: '#409EFF',
                colorList: [
                    { name: '紫罗兰红色', color: '#DB7093' },
                    { name: '兰花紫', color: '#BA55D3' },
                    { name: '靛青', color: '#31314C' },
                    { name: '板岩暗蓝灰色', color: '#6A5ACD' },
                    { name: '午夜的蓝色', color: '#191970' },
                    { name: '科技感', color: '#32354a' },
                    { name: '矢车菊的蓝色', color: '#6495ED' },
                    { name: '道奇蓝', color: '#1E90FF' },
                    { name: '天蓝色', color: '#87CEEB' },
                    { name: '卡其布', color: '#F0E68C' }
                ]
            };
        },
        components: {
            vPicker
        },
        computed: {
            ...mapGetters(['sidebarPage', 'homeColor', 'headPhotoInfo']),
            radios: {
                get() {
                    return this.sidebarPage;
                },
                set(val) {
                    this.SET_SIDEBARPAGE(val);
                }
            },
            username() {
                let username = localStorage.getItem('ms_username');
                return username ? username : this.name;
            }
        },
        methods: {
            ...mapMutations(['SET_SIDEBARPAGE', 'SET_HOMECOLOR', 'SET_SIDEBARCOLOR', 'SET_HEADPHOTOINFO']),
            // 用户名下拉菜单选择事件
            handleCommand(command) {
                if (command == 'loginout') {
                    this.$confirm('确定退出系统吗？', '提示', {
                        type: 'warning'
                    }).then(() => {
                        localStorage.removeItem('ms_username');
                        this.$router.push('/login');
                    }).catch(() => {
                    });
                }
            },
            // 侧边栏折叠
            collapseChage() {
                if (this.radios === '1') {
                    this.collapse = !this.collapse;
                    bus.$emit('collapse', this.collapse);
                } else {
                    return;
                }
            },
            // 全屏事件
            handleFullScreen() {
                let element = document.documentElement;
                if (this.fullscreen) {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                } else {
                    if (element.requestFullscreen) {
                        element.requestFullscreen();
                    } else if (element.webkitRequestFullScreen) {
                        element.webkitRequestFullScreen();
                    } else if (element.mozRequestFullScreen) {
                        element.mozRequestFullScreen();
                    } else if (element.msRequestFullscreen) {
                        // IE11
                        element.msRequestFullscreen();
                    }
                }
                this.fullscreen = !this.fullscreen;
            },
            handleClose() {
                this.drawer = false;
            },
            changeRadioFun() {
                let loads = new loadEvents();
                loads.open();
                setTimeout(() => {
                    this.handleClose();
                    loads.close();
                    bus.$emit('changeRadio', this.radios);
                    this.collapse = false;
                    bus.$emit('collapse', false);
                    this.$message.success('操作成功！');
                }, 200);
            },
            GetHeadPhoto(item) {
                this.headPhoto = item;
                this.handleClose();
                this.SET_HEADPHOTOINFO(this.headPhoto);
            },
            serColor(obj, type) {
                let submitColor;
                if (type === 1) {
                    submitColor = this.colorPage1 ? this.colorPage1 : obj;
                } else {
                    submitColor = this.colorPage2 ? this.colorPage2 : obj;
                }
                let loads = new loadEvents();
                loads.open();
                setTimeout(() => {
                    this.handleClose();
                    loads.close();
                    if (type === 1) {
                        this.SET_HOMECOLOR(submitColor);
                    } else {
                        this.SET_SIDEBARCOLOR(submitColor);
                    }
                    this.$message.success('操作成功！');
                }, 200);
                if (type === 1) {
                    this.colorPage1 = '';
                } else {
                    this.colorPage2 = '';
                }
            }
        },
        mounted() {
            if (document.body.clientWidth < 1500) {
                this.collapseChage();
            }
        }
    };
</script>
<style lang="scss" scoped>
    .header {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: 70px;
        font-size: 22px;
        color: #fff;
    }

    .collapse-btn {
        float: left;
        padding: 0 21px;
        cursor: pointer;
        line-height: 70px;
    }

    .header .logo {
        float: left;
        width: 250px;
        line-height: 70px;
    }

    .header-right {
        float: right;
        padding-right: 50px;
    }

    .header-user-con {
        display: flex;
        height: 70px;
        align-items: center;
        @for $i from 0 through 3 {
            > div:nth-child(#{$i}) {
                margin-right: 15px;
            }
        }
    }

    .btn-fullscreen {
        transform: rotate(45deg);
        margin-right: 5px;
        font-size: 24px;
    }

    .btn-bell,
    .btn-fullscreen {
        position: relative;
        width: 30px;
        height: 30px;
        text-align: center;
        border-radius: 15px;
        cursor: pointer;
    }

    .btn-bell-badge {
        position: absolute;
        right: 0;
        top: -2px;
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background: #f56c6c;
        color: #fff;
    }

    .btn-bell .el-icon-bell {
        color: #fff;
    }

    .user-name {
        margin-left: 10px;
    }

    .user-avator {
        margin-left: 20px;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .user-avator svg {
        display: block;
        width: 40px;
        height: 40px;
    }

    .user-avator-else {
        margin-left: 20px;
        background: #fff;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .user-avator-else svg {
        display: block;
        width: 35px;
        height: 35px;
    }


    .el-dropdown-link {
        color: #fff;
        cursor: pointer;
    }

    .el-dropdown-menu__item {
        text-align: center;
    }

    .content_box {
        width: 100%;
        height: 100vh;
        padding: 20px;
        overflow-y: auto;

        .photo_box {
            width: 100%;
            display: flex;
            flex-wrap: wrap;

            .headPhoto {
                width: 20%;
                height: 70px;
                display: flex;
                align-items: center;
                justify-content: center;

                svg {
                    width: 50px;
                    height: 50px;
                    margin-right: 40px;
                    cursor: pointer;
                }
            }
        }
    }

    .colorList_box {
        height: 80px;
        display: flex;
        flex-wrap: wrap;
        color: #333;
        font-size: 13px;

        .colorDefault {
            width: 25%;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            cursor: pointer;

            .colorName {
                width: 50%;
                text-align: right;
            }

            .colorList {
                width: 30px;
                height: 30px;
                display: block;
                margin: 20px 20px 20px 5px;
                border-radius: 5px;
            }
        }

    }
</style>
